<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 系统管理 <span class="c-gray en">&gt;</span> 菜单管理</nav>
	<div id="sectionContent" class="Hui-article">
		<article class="cl pd-20">
			<div class="mt-20">
				<table class="table">
					<tr>
						<td width="200" class="va-t">
							<div class="cl pd-5 bg-1 bk-gray">
				          <span class="l">系统菜单导航</span>
				      </div>
							<ul id="systemMenus" class="ztree"></ul>
						</td>
						<td class="va-t">
								<table class="table table-border table-bordered table-bg">
									<thead>
										<tr><th colspan="10" scope="col">
												<a href="#!view/system/menu/menu-add.html?pId={{parentId}}" class="btn size-M btn-primary"><i class="Hui-iconfont">&#xe604;</i> 添加</a>
										</th></tr>
										<tr class="text-c">
											<th>ID</th>
											<th>菜单名称</th>
											<th>图标</th>
											<th>链接地址</th>
											<th>上级菜单名称</th>
											<th>描述</th>
											<th>排序</th>
											<th>类型</th>
											<th>创建时间</th>
											<th>操作</th>
										</tr>
									</thead>
									<tbody>
										<tr class="text-c" v-for="(row,index) in result">
											<td>{{(row,index).id}}</td>
											<td>{{(row,index).name}}</td>
											<td>{{(row,index).ico}}</td>
											<td>{{(row,index).uri}}</td>
											<td>{{(row,index).parentName}}</td>
											<td>{{(row,index).note}}</td>
											<td>{{(row,index).sort}}</td>
											<td v-if="(row,index).systemCfg">
												<span style="color:green">系统默认配置</span>
											</td>
											<td v-else>
												<span style="color:blue">自定义</span>
											</td>
											<td>{{(row,index).createTime | formatDate}}</td>
											<td v-if="(row,index).systemCfg">
												<span style="color:red">无权操作</span>
											</td>
											<td v-else>
												<a href="#!view/system/menu/menu-edit.html?id={{(row,index).id}}"><i class="Hui-iconfont">&#xe60c;</i>编辑</a>
												<a v-on:click="deleteData((row,index).id)" style="cursor:pointer"><i class="Hui-iconfont">&#xe6e2;</i>删除</a>
											</td>
										</tr>
									</tbody>
								</table>
						</td>
					</tr>
				</table>
			</div>
		</article>
	</div>
<script>
      new Vue({
          el:'#sectionContent',
          http: authorization(),
          data:{
							parentId:0,
              result:[]
          },
          created:function(){
							this.$http.get('/restful/base/v1.0/menu').then((response) => {
	                var setting = {
	                    data: {
	                        simpleData: {
	                            enable: true,
	                            pIdKey: "pid"
	                        }
	                    },
											callback: {
												onClick: this.zTreeOnClick
											}
	                };
									var menus = new Array();
									responseObj(response).data.forEach(function(data){
											var menu = new Object();
											menu.id = data.id;
											menu.pid = data.parentId;
											menu.name = data.name;
											menus.push(menu);
											data.childs.forEach(function(childMenu){
													var child = new Object();
													child.id = childMenu.id;
													child.pid = childMenu.parentId;
													child.name = childMenu.name;
													menus.push(child);
											});
									});
	                $.fn.zTree.init($("#systemMenus"), setting, menus);
	            }).catch(function(response) {
	                alert(errorMsg(response));
	            });
              this.loadGrid(0);
          },
          methods:{
							deleteData:function(menuId){
									if(!confirm("你确认删除数据吗？")){
											return;
									}
									this.$http.delete('/restful/base/v1.0/menu?menuIds='+menuId).then((response) => {
											this.loadGrid(0);
									}).catch(function(response) {
											alert(errorMsg(response));
									});
							},
							zTreeOnClick:function(event, treeId, treeNode){
								 this.loadGrid(treeNode.id);
							},
              loadGrid:function(parentId){
                  this.$http.get('/restful/base/v1.0/menu/query/list?parentId='+parentId).then((response) => {
										this.result = responseObj(response).data;
										this.parentId = parentId;
                  }).catch(function(response) {
                      alert(errorMsg(response));
                  });
              }
          },
          filters: {
              formatDate:function(time) {
                  return new Date(time).format("yyyy-MM-dd hh:mm:ss");
              }
          }
      });
  </script>
